<template>
    <div>
        <Modal v-model="selectSwitch" width="780">
            <p slot="header" style="text-align:center">
                <span>选择小程序</span>
            </p>
            <div class="adaptiveContainer"> 
                <Table :columns="columnsData" :loading="loading" :data="data1" height="500"></Table>
            </div>
            <Row class="pageContainer" type="flex" justify="center">
                <Col>
                    <Page />
                </Col>
            </Row>
            <div class="disFlex vertical Flex-middle" slot="footer">
                <span style="text-align: center;margin-bottom: 15px;">注意：只可选已发布小程序，选择之后，原有活动则在小程序上不可见</span>
                <div class="disFlex">
                    <Button type="primary" size="large" @click="saveFn">保存</Button>
                </div>
            </div>
        </Modal>
        <Modal
            v-model="modal1"
            title="提示"
            @on-ok="okFn">
            <p>绑定了会解绑这个小程序当前绑定的活动</p>
        </Modal>
    </div>
</template>
<style scoped lang="less">
/*搜索*/
.search {
    padding: 15px 0;
    box-sizing: border-box;
    background: #fff;
}

// .adaptiveContainer {
//     height: 700px;
// }

/*搜索下拉*/
.search-select {
    width: 20%;
    margin-right: 15px;
}

/*搜索输入框*/
.search-input {
    margin-right: 15px;
}

/*搜索确定按钮*/
.search-button{
    width: 7%;
}

/*分页*/
.pageContainer {
    padding: 16px 0 0;
    background: #fff;
}

.shop-logo {
    width: 100%;
    overflow-x: scroll;
    flex-wrap: nowrap;
    margin-top: 15px;

    .logo-item {
        position: relative;
        top: 0;
        left: 0;
        margin-left: 15px;

        &:nth-of-type(1) {
            margin-left: 0;
        }

        img {
            width: 60px;
            height: 60px;
        }

        .del {
            position: absolute;
            top: 0;
            right: 0;
            width: 15px;
            height: 15px;
            background: red;
            color: #fff;
            font-weight: bold;
            cursor: pointer;
        }
    }
}
</style>
<script>
    import {relationProgramList,relationProgram} from 'api/festival'
    export default {
        data () {
            return {
                modal1: false,

                selectSwitch: false,

                // 表格加载开关
                loading: true,

                // 表格高度
                tableHeight: '',

                // 搜索值
                searchVal: '',

                // 是否单选
                singleElection: true,

                columnsData: [
                    {
                        title: '小程序名称',
                        key: 'wechat_name_cn'
                    },
                    {
                        title: '当前关联活动',
                        key: 'festival_title'
                    },
                    {
                        title: '状态',
                        render: (h, params) => {
                            let str
                            switch(params.row.code_commit_audit_status){
                                case 0:
                                    str = '已发布'
                                    break;
                                case 1: 
                                    str = '审核中'
                                    break;
                                case 2: 
                                    str = '审核失败'
                                    break;
                                case 3: 
                                    str = '审核成功'
                                    break;
                            }
                            return h('span', str);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            let strOff = this.hasSelectArray.find(item => item.wechat_multi_id == params.row.wechat_multi_id)
                            
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: strOff ? 'default' : 'primary',
                                        size: 'small',
                                    },
                                    on: {
                                        click: () => {
                                            if(this.hasSelectArray.length == 1){
                                                if(this.hasSelectArray[0].wechat_multi_id == params.row.wechat_multi_id){
                                                    this.hasSelectArray.splice(0,1)
                                                }else {
                                                    this.hasSelectArray.splice(0,1,JSON.parse(JSON.stringify(this.data1[params.index])))
                                                }
                                            }else {
                                                this.hasSelectArray.push(JSON.parse(JSON.stringify(this.data1[params.index])))
                                            }
                                        }
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                }, strOff ? '取消' : '选择'),
                            ],);
                        }
                    }
                ],
                
                data1: [],

                shopSelectList: [],

                // 已选
                hasSelectArray: [],

                // 总页数
                allPage: 1,

                // 打开参数
                openData: null,
            }
        },
        computed:{
        },
        methods: {
            // 获取数据
            init(){
                // 开启表格加载
                this.loading = true
                relationProgramList().then(_data => {
                    this.data1 = _data.data

                    // 重置滚动条
                    document.getElementsByClassName("ivu-table-body")[0].scrollTop = 0

                    // 结束过度动画
                    this.$nextTick(() => {
                        this.selectSwitch = true
                        this.loading = false
                    })
                })
            },

            // 打开企业选择器
            openFn(_obj){
                this.openData = JSON.parse(JSON.stringify(_obj))

                this.init()
            },

            saveFn(){
                if(this.hasSelectArray.length == 0){
                    this.selectSwitch = false
                    this.modal1 = false
                }else {
                    this.okFn()
                }
            },

            // 确定
            okFn(){
                let params = {
                    festivalId: this.openData.festivalId,
                    wechatId: this.hasSelectArray[0].wechat_multi_id,
                    type: this.openData.type,
                }
                relationProgram(params).then(_data => {
                    this.selectSwitch = false
                    this.modal1 = false
                    this.$emit('commitProgramFn', JSON.parse(JSON.stringify(this.hasSelectArray)),this.openData.type)
                    this.$Message.success('绑定成功');
                },_err => {
                    this.$Message.error('绑定失败');
                })
            }
        }
    }
</script> 